<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1 {
				width: 200px;
				height: 200px;
				background-color: red;
			}

			.box2 {
				width: 200px;
				height: 200px;
				background-color: yellow;
				/*
				固定定位 fixed
					固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样。
					比如脱离文档流，提高层级等。
				不同的是：
					固定定位只相对于浏览器窗口。
					会固定在浏览器窗口的某个位置，不会随滚动条滚动。
				
				IE6不支持固定定位。以后用JS解决。
				*/
				position: fixed;
				left: 0px;
				top: 0px;
			}

			.box3 {
				width: 300px;
				height: 300px;
				background-color: yellowgreen;
			}
			
			.box4{
				width: 300px;
				height: 300px;
				background-color: blue;
				position: relative;
			}
		</style>
	</head>
	<body style="height: 5000px;">
		<div class="box1"></div>
		<div class="box4">
			<div class="box2">box2</div>
		</div>		
		<div class="box3"></div>
	</body>
</html>
